<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>修改用户信息</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="/static/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
<form class="layui-form layui-form-pane" action="" style="margin: 10%;">
  <input type="hidden" id="user_id" name="user_id" value="{{ id }}">
  {% if id == 0 %}
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-inline">
        <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
  {% endif %}

  <div class="layui-form-item">
    <label class="layui-form-label">权限列表</label>
    <div class="layui-input-block">
      <div id="parent_list"></div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item" pane>
    <label class="layui-form-label">状态</label>
    <div class="layui-input-block">
      <input type="radio" name="status" value="1" title="正常" {% if status == 1 %}checked{% endif %}>
      <input type="radio" name="status" value="0" title="失效" {% if status == 0 %}checked{% endif %}>
    </div>
  </div>
  <div class="layui-form-item">
    <button class="layui-btn" lay-submit lay-filter="addpower">确认</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</form>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="/static/layui.js"></script>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/js/base.js"></script>
<script>
layui.use(['form'], function(){
  var form = layui.form;
  var layer = layui.layer;
  var tree = layui.tree;

  // 权限选择器
  let data = JSON.parse('{{ powers | tojson | safe}}');
    // 渲染
  tree.render({
    elem: '#parent_list',
    data: data,
    showCheckbox: true,
    accordion: true,
    id: "power_list",
    customName: { // 自定义 data 字段名 --- 2.8.14+
      id: 'id',
      title: 'name',
      children: 'children'
    }
  });


  // 提交事件
  form.on('submit(addpower)', function(data){
    let power_list = tree.getChecked('power_list');
    // 输出第二层选中的节点
    function getSecondLayerNodes(nodes, result = []) {
        nodes.forEach(node => {
            if (node.children) {
                node.children.forEach(child => {
                    result.push(child);
                });
            }
        });
        return result;
    }
    var secondLayerNodes = getSecondLayerNodes(power_list);
    power_list = power_list.concat(secondLayerNodes);
    let powers = [];
    power_list.forEach(function(item){
       powers.push(item.id);
    });

    $.ajax({
      url: '/power/userUpdate',
      type: 'POST',
      data: JSON.stringify({
        "id": data.field.user_id,
        "password": data.field.password,
        "username": data.field.username,
        "status": data.field.status,
        "powers": powers
      }),
      dataType: 'json',
      success: function(response) {
        parent.layer.closeAll();
        layer.msg(response.data);
        parent.location.href = "/power/";
      }
    });
    return false; // 阻止默认 form 跳转
  });

});
</script>

</body>
</html>